<template>
    <div class="pet">
        <div class="cardPet" v-if="cardShow">
            <el-card class="box-card" @click="DetailPet(item)" v-for="(item,index) in tableData" :key="index">
                <div class="cardImg"><img :src="item.pimageBase64" /></div>
                <div class="cardText">
                    <p>姓名：<span style="font-weight: bold;font-size: 18px;color:rgb(69 69 69);">{{item.pname}}</span></p>
                    <p>种类：<span>{{item.pkind}}</span>&emsp;&emsp;
                        状态：
                        <span v-if="item.status=='0'">未领养</span>
                        <span v-else-if="item.status=='3'">被领养</span>
                        <span v-else>其它</span></p>
                    <p>备注：<span>{{item.describe}}</span></p>
                </div>
            </el-card>
        </div>
        <div class="tablePet" v-else>
            <el-button class="My_history" onclick="javascript:history.go(-1)" type="primary">返回</el-button>
            <div class="operate">
                <el-button type="primary" @click="addPet">添加宠物动态</el-button>
                <div class="search">
                    <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入宠物名查询" />
                    <el-button type="primary" @click="search">查询</el-button> 
                </div>
            </div>
            <div class="tableData">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="pname" label="宠物名" width="130" />
                    <el-table-column label="照片" width="130">
                        <template #default="scope">
                            <img style="width: 40px;" :src=scope.row.pimageBase64 />
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="130">
                        <template #default="scope">
                            <span v-if="scope.row.status==0"><i class="Statusflag" style="background-color: #009dff;"></i>不正常</span>
                            <span v-else-if="scope.row.status==1"><i class="Statusflag" style="background-color: #f2ff00;"></i>不确定</span>
                            <span v-else-if="scope.row.status==2"><i class="Statusflag" style="background-color: #ff2600;"></i>生病</span>
                            <span v-else><i class="Statusflag" style="background-color: #06ff00;"></i>正常</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="Psex" label="性别" width="130">
                        <template #default="scope">
                            <span v-if="scope.row.psex==0">雄</span>
                            <span v-else>雌</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="价格" width="90" />
                    <el-table-column prop="page" label="年龄" width="130" />
                    <el-table-column prop="pkind" label="种类" width="130" />
                    <el-table-column prop="createTime" label="时间" width="130" />
                    <el-table-column fixed="right" label="操作" width="200">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="DetailPet(scope.row)">详情</el-button>
                        <el-button type="info" size="small" @click="EditPet(scope)">修改</el-button>
                        <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                    </template>
                    </el-table-column>
                </el-table>
                <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="this.pagination.total" />
            </div>
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl"
            :before-close="handleClose"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="名字">
                        <el-input v-model="fromData.pname" />
                    </el-form-item>
                    <el-form-item label="照片">
                        <div id="fileSelect">
                            <input @change="getFile($event)" type="file" />
                            <span v-if="SrcImg==null">+</span>
                            <img style="width: 80px;" v-else :src="SrcImg" />
                        </div>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="fromData.status" placeholder="请选择">
                            <el-option label="不正常" value="0" />
                            <el-option label="不确定" value="1" />
                            <el-option label="生病" value="2" />
                            <el-option label="正常" value="3" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-select v-model="fromData.psex" placeholder="请选择">
                            <el-option label="雄" value="0" />
                            <el-option label="雌" value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="价格">
                        <el-input v-model="fromData.price" />
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="fromData.page" />
                    </el-form-item>
                    <el-form-item label="种类">
                        <el-input v-model="fromData.pkind" />
                    </el-form-item>
                    <el-form-item label="接种疫苗">
                        <el-input v-model="fromData.isVaccine" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.describe" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { ElMessageBox,ElMessage  } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex' 
export default defineComponent({
    data(){
        return{
            // 判断显示卡片还是表格
            cardShow:true,
            userMessage:null,
            tableData:[
                {
                    "Id":1,
                    "pname":'旺旺',
                    "pimage":'../../../assets/niu.jpg',
                    "status":'0',
                    "psex":'0',
                    "page":"10",
                    "price":0.0,
                    "pkind":'犬科',
                    "petbase":'邯郸',
                    "isVaccine":'是',
                    "describe":'这是第一支小狗，要好好照顾啊！',
                    "createTime":"2020-10-30"
                }
            ],
            fromData:{
                "pname":'',
                "pimage":'',
                "status":'',
                "psex":'',
                "page":0,
                "pkind":'',
                "price":0,
                "petbase":'',
                "pid":0,
                "isVaccine":'',
                "describe":''
            },
            searchName:'',
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            },
            drawer:false,
            Title:"添加",
            SrcImg:null,
            fosterMessage:null
        }
    },
    setup() {
        // 路由
        const route = useRouter();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            store
        } 
    },
    created () {
        this.userMessage = this.store.state.UserMessage;
        if(this.userMessage!=null && this.userMessage.Identify=="0") this.cardShow = false;
        this.fosterMessage = this.store.state.FosterMessage;
        this.LoadData();
    },
    methods:{
        LoadData(){
            let self = this;
            let row = this.pageData();
            row.pid = this.fosterMessage.id;
            self.$http.post(`${self.baseUrl}/pet/PidByIdPet`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        addPet(){
            this.drawer = true;
            this.fromData = this.initial();
        },
        searchPet(){
            this.route.push({
                path:'/Coordinate',
                query:{flag:'pet'}
            })
        },
        DetailPet(msg){
            this.store.commit("basicPet",msg)
            this.route.push({
                path:"/PetDetail",
                id:msg.Id
            })
        },
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.fromData.pimage = file;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        search(){
            let self = this;
            let row = this.pageData();
            row.name = self.searchName;
            row.current = 1;
            self.$http.post(`${self.baseUrl}/pet/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
            })
        },
        onSubmit(){
            let self = this;
            if(this.fosterMessage==null||this.fosterMessage.id==undefined) return;
            let fromdata = new FormData();
            let d = self.fromData;
            fromdata.append("Pname",d.pname);
            fromdata.append("status",d.status);
            fromdata.append("Psex",d.psex);
            fromdata.append("Page",d.page);
            fromdata.append("Pkind",d.pkind);
            fromdata.append("price",d.price);
            fromdata.append("pid",d.pid);
            fromdata.append("IsVaccine",d.isVaccine);
            fromdata.append("describe",d.describe);
            fromdata.append("uid",this.fosterMessage.id);
            if(self.Title == "修改"){
                fromdata.append("Id",d.id);
                if(self.fromData.pimage != null) fromdata.append("Pimage",d.pimage);
                self.$http.post(`${self.baseUrl}/pet/updatePetMessage`,fromdata).then(res=>{
                    self.drawer = false;
                    ElMessage({
                        message:"修改成功",
                        type:'success'
                    })
                    self.LoadData()
                })
            }else{
                fromdata.append("Pimage",d.pimage);
                self.$http.post(`${self.baseUrl}/pet/AddPetMessage`,fromdata).then(res=>{
                    self.drawer = false;
                    ElMessage({
                        message:"添加成功",
                        type:'success'
                    })
                    self.LoadData()
                })
            }
        },
        EditPet(msg){
            this.drawer = true;
            this.Title = "修改";
            this.fromData = msg.row;
            this.fromData.id = msg.row.id;
            this.SrcImg = msg.row.pimageBase64;
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除${msg.row.pname}吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/pet/deletePetMessage?id=${msg.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        // 分页器
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            this.SrcImg = null;
            return {
                "pname":'',
                "pimage":'',
                "status":'',
                "psex":'',
                "page":0,
                "price":0.0,
                "pkind":'',
                "isVaccine":'',
                "describe":''
            };
        }
    }
})
</script>
<style scoped>
    .My_history{
        display: inline-block;
        float: left;
        margin-right: 10px;
    }
    .cardPet{
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        flex-wrap: wrap;
    }
    .box-card{
        width: 270px;
        height: 250px;
        margin: 18px 10px;
        border-radius: 20px;
        cursor: pointer;
    }
    .cardImg{
        width: 75%;
        height: 150px;
        margin: 0 auto 8px auto;
    }
    .cardImg img{
        width: 87%;
        height: 100%;
    }
    .cardText p{
        width: 80%;
        height: 21px;
        color: #857a7a;
        font-size: 13px;
        line-height: 21px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 1px auto 1px auto;
    }
    .cardText p span{
        color: #ec9494;
    }
    .search{
        float: right;
    }   
    .tableData{
        margin-top: 16px;
    }
    .el-table{
        width: 100%;
        height: calc(576px - 10px);
    }
</style>